<template>
    <div>
        <div class="left"><img src="/static/Exhibition_img/radian.png" /></div>
        <div id="map" ></div>
    </div>
</template>

<script>
export default {
    name: 'smallMap',
    data() {
        return {
            bbb: '',
            updata: '',
            changeMap:'',
            bounds: [
                [109.48660019064262, 18.26841373957716], // Southwest
                [109.48881615176441, 18.270578926294355],
            ], // Northeast
        }
    },
    props: ['transPosition'],
    mounted() {
        this.initmap()
    },
    methods: {
        initmap() {
            // mapboxgl.accessToken = 'pk.eyJ1Ijoic3g4NTQ5NjUxODUiLCJhIjoiY2toYnA4aHk2MHNjMzJwazQ0c2hnb2Y1dSJ9.tx6xx7jLEKAAwdTGLhsenQ';
            // var map = new mapboxgl.Map({
            // container: 'map',
            // style: 'mapbox://styles/sx854965185/ckhzmu4c31h641alu10s862w4',
            // center: [109.48750966865695,18.269294359985494], // 起始位置 109.60827578376235,18.30866679535378,0
            // zoom: 16, // 开始的缩放倍数
            // // maxBounds: this.bounds
            // });

            var map = new mapboxgl.Map({
                container: 'map',
                style: {
                    version: 8,
                    sources: {
                        'raster-tiles': {
                            type: 'raster',
                            tiles: [
                                'http://localhost:8090/iserver/services/map-DaoHangXiaoTu/rest/maps/%E5%AF%BC%E8%88%AA%E5%B0%8F%E5%9B%BE_%E7%BB%8F%E7%BA%AC%E5%BA%A6@%E5%B0%8F%E5%9B%BE/zxyTileImage.png?z={z}&x={x}&y={y}',
                            ],
                            tileSize: 256,
                        },
                    },
                    layers: [
                        {
                            id: 'simple-tiles',
                            type: 'raster',
                            source: 'raster-tiles',
                            // minzoom: 0,
                            // maxzoom: 22,
                        },
                    ],
                },
                center: [109.48745494019622, 18.269371823490587],
                zoom: 14,
                pitch: 0,
                // bearing: 50,
                maxBounds: this.bounds,
            })

            var nav = new mapboxgl.NavigationControl({
                //是否显示指南针，默认为true
                showCompass: true,
                //是否显示缩放按钮，默认为true
                showZoom: false,
            })
            //添加导航控件，控件的位置包括'top-left', 'top-right','bottom-left' ,'bottom-right'四种，默认为'top-right'
            map.addControl(nav, 'top-left')

            var _this = this
            map.on('load', function () {
                map.addSource('geojson', _this.createDot([109.48748, 18.26930249]))
                map.loadImage('/static/img/newyellow.png', function (error, image) {
                    if (error) throw error
                    map.addImage('point', image)
                    map.addLayer({
                        id: 'points',
                        type: 'symbol',
                        source: 'geojson',
                        layout: {
                            'icon-image': 'point',
                            'icon-size': 0.2,
                        },
                    })
                })
            })
            // 更新位置的方法
            this.updata = function () {
                let data = this.createDot([this.transPosition[0], this.transPosition[1]]).data
                if (map.getSource('geojson')) {
                    map.getSource('geojson').setData(data)
                }
                map.rotateTo(((this.transPosition[2] * 180) / 3.1415926 - 90) % 360, { duration: 0 })
            }

        },
        


        // 返回json格式
        createDot(center) {
            var coords = {
                latitude: center[1],
                longitude: center[0],
            }

            var ret = []
            ret.push([coords.longitude, coords.latitude])
            ret.push(ret[0])

            return {
                type: 'geojson',
                data: {
                    type: 'FeatureCollection',
                    features: [
                        {
                            type: 'Feature',
                            geometry: {
                                type: 'Point',
                                coordinates: ret[0],
                            },
                        },
                    ],
                },
            }
        },
    },
    watch: {
        transPosition(n, o) {
            if (o != '') {
                this.updata()
            }
        },
    },
}
</script>

<style>
.left {
    position: absolute;
    bottom: 0;
    left: -3.7rem;
    font-size: none;
    width: 3.7rem;
    height: 100%;
    z-index: 99;
}
.left img {
    width: 100%;
    height: 100%;
}
#map {
    height: 100%;
    width: 26.3rem;
    opacity: 0.6;
    border: none;
}
.mapboxgl-ctrl {
    display: none !important;
}
</style>
